<template>
  <el-container class="main_paper">
    <el-main>
      <el-card class="box-card" v-if="this.$store.state.paper.id!='0'&&this.paperData.id!=''">
        <!--标题-->
        <b>{{ this.paperData.theme }}</b>
        <el-button @click="dialogFormVisible=true" style="transform: translate(12%,-10%)" type="primary" icon="el-icon-edit" size="mini"></el-button>

        <!-- 如果没有问卷就弹窗-->
        <!--分割线-->
        <el-divider content-position="right">{{ $store.state.VueName + this.$store.state.paper.id }}</el-divider>
        <!--        分割线以下内容区域-->
        <div class="main_div">
          <!--前言区域-->
          <div class="head_div">
            <div class="form_div">
              <p>前言:{{ this.paperData.content }}</p>
            </div>
            <div class="video_div" v-if="this.paperData.fileSrc!=null||this.paperData.fileSrc!=''">
              <video controls="controls"
                     :src="this.$store.state.fileBaseSrc+this.paperData.fileSrc"
                     style="width: 100%;height: 100%;object-fit: fill"
                     loop="loop"
                     v-if="isVideo(this.paperData.fileSrc)"
              >
              </video>
              <el-image :src="this.$store.state.fileBaseSrc+this.paperData.fileSrc"
                        v-if="isPic(this.paperData.fileSrc)"
                        style="width: 100%;"
                        muted="true"
              >
              </el-image>
            </div>
          </div>
        </div>
        <br>
        <!--题目区域-->
        <div class="topic_div">
          <hr width="80%">
          <div v-for="(topic,index) in this.paperData.topics" :key="index"
               style="width:80%;margin: 0 auto;text-align: left">
            <div style="text-indent: 2em;">
              <p>{{ index + 1 + '.' + topic.title }}
                <el-button type="primary" icon="el-icon-delete" size="mini"
                           @click="deleteTopic(topic.id)"></el-button>
              </p>
            </div>
            <div style="margin-left: 30px">
              <el-input v-if="topic.answerType==0" type="textarea"
                        placeholder="请输入内容" style="width: 60%;position: relative;left: 0px"></el-input>

              <el-radio v-if="topic.answerType==1"
                        v-for="(answer,index) in topic.answers"
                        :key="index"
                        style="font-size: 30px"
                        :label="answer.id"
              >
                {{ answer.title }}
              </el-radio>
              <el-checkbox v-if="topic.answerType==2"
                           v-for="(answer,index) in topic.answers"
                           :key="index"
                           style="font-size: 30px">
                {{ answer.title }}
              </el-checkbox>
            </div>
          </div>
        </div>
        <el-dialog title="修改问卷标题" :visible.sync="dialogFormVisible" width="30%">
          <el-form :model="paperData" ref="editThemeRef" :rules="rules">
            <el-form-item label="问卷标题" prop="theme" >
              <el-input v-model="paperData.theme" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="cancelEdit">取 消</el-button>
            <el-button type="primary" @click="editQuestionTheme">确 定</el-button>
          </div>
        </el-dialog>
      </el-card>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: "paper",
  data() {
    return {
      paperData: {
        id: '',
        fileSrc: '',
        topics: [
          {
            answers: [
              {}
            ]
          }
        ]
      },
      rules:{
        theme: [
          {min: 3, max: 9, message: '问卷标题字符数在3到9之间!', trigger: ['blur','change']}
        ]
      },
      dialogFormVisible: false, //标志修改标题
      theme: ''
    }
  },
  methods: {
    deleteTopic(id) {
      this.$http.delete("topic/delete/" + id).then(resp => {
        if (resp.flag == true) {
          console.log(resp.message);
          this.refreshData();
          this.$notify({
            title: '提示',
            message: '删除成功',
            type: 'success'
          });
        }
      })
    },
    isPic(str) {
      if (str == null) return false;
      let strings = str.split('.');
      let string = strings[strings.length - 1];
      console.log(string);
      if (string == 'jpg' || string == 'png') {
        return true;
      }
    },
    isVideo(str) {
      if (str == null) return false;
      let strings = str.split('.');
      console.log(strings[1]);
      let string = strings[strings.length - 1];
      if (string == 'mp4') {
        return true;
      }
    },
    refreshData() {
      this.$http.get("question/paper/" + this.$store.state.paper.id).then(resp => {
        if (resp.flag == true) {
          console.log(resp.message);
          this.paperData = resp.data
        }
      })
    },
    editQuestionTheme(){
      this.dialogFormVisible=false;
      this.$refs.editThemeRef.validate((valid) => {
        if(valid){
          this.$http.post("question/editQuestion",this.paperData).then(resp => {
            if (resp.flag) {
              this.$message.success("问卷标题修改成功");
              console.log(resp);
            }
          })
        }else{
          this.refreshData();
        }
      });
    },
    cancelEdit(){
      this.dialogFormVisible=false;
      this.refreshData();
    }
  }, created() {
    this.refreshData();
  },
  destroyed() {
    this.$store.state.paper.id = '0';
  }
}
</script>

<style lang="less" scoped>

.main_paper {
  height: 100%;
}

.box-card {
  position: relative;
  min-width: 600px;
  margin: 0 auto;
  width: 80%;
  height: 99%;
  text-align: center;
  overflow: scroll;
  /*IE 10+·隐藏滚动条*/
  -ms-overflow-style: none;
  /*火狐隐藏滚动条*/
  overflow: -moz-scrollbars-none;

  b {
    color: #409EFF;
    font-size: 30px;
  }

  .main_div {
    text-align: left;
    margin: 0 auto;
    position: relative;
    width: 80%;

    .head_div {
      position: relative;
      .video_div {
        position: relative;
        margin: 0 auto;
        width: 70%;

      }
      .form_div {
        position: relative;
        height: auto;
        /*border: salmon solid 1px;*/
        p {
          text-indent: 2em;
        }
      }
    }
    .topic_div {
      width: 600px;
    }
  }
}
.box-card::-webkit-scrollbar {
  display: none;
}

</style>